<template>
  <div class="home">
    <h1>校园社区后台管理系统</h1>
    <div class="login-page">
      <form @submit.prevent="demo">
        <label class="line_info top"
          >账号:&nbsp;&nbsp;
          <el-input
            class="input_account"
            v-model="input_account"
            placeholder="Please input account name"
            clearable
        /></label>
        <label class="line_info"
          >密码:&nbsp;&nbsp;
          <el-input
            class="input_account"
            v-model="input_password"
            type="password"
            placeholder="Please input password"
            show-password
        /></label>
        <el-row class="mb-4">
          <el-button @click="getAdmin" class="btn_submit" type="primary" round
            >登录</el-button
          >
        </el-row>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ref,reactive } from "vue";
import { useStore } from 'vuex'

export default {
  name: "Home",
  setup(){
    // 收集输入框的信息:账号和密码
    let input_account = ref('')
    let input_password = ref('')
    // 为获取到的管理员数据做好准备
    let admin = reactive({
      user:[]
    })
    const store = useStore()

    function getAdmin() {
      // 只要其中有一个为true就进行跳转页面,并收集管理员信息
      return admin.user.some((element) => {
        return (
          // 对用户名进行去除空格行为 如果前两个判断为真就存储数据
          element.name === input_account.value.trim() &&
          element.password === input_password.value && (store.state.adminname = input_account)
        );
      })
        ? window.location.hash = '#/Examine'
        : alert("用户名或密码错误");
    }
    return {
      input_password,
      input_account,
      admin,
      getAdmin
    }
  },
  mounted() {
    // 在挂载完毕后发送请求
    axios
      .get("https://qcljo8.api.cloudendpoint.cn/find_admin")
      .then(
        (response) => {
          // 将获得的数据传递给admin.user
          this.admin.user = response.data;
        },
        (error) => {
          console.log("服务器可能出现了故障", error.message);
        }
      );
  },
};
</script>

<style lang="less">
@garyclolor:rgb(112, 112, 112);
:root {
  --el-color-primary: #2a87e4;
}

.home{
  padding-top: 5%;
}

.login-page {
  width: 40%;
  height: 280px;
  border: 1px solid @garyclolor;
  color: @garyclolor;
  margin: 60px auto;
  border-radius: 20px;

  .line_info {
    display: block;
    height: 60px;
    margin-top: 20px;
    .input_account {
      width: 70%;
    }
  }
  .top {
    margin-top: 40px;
  }
  .btn_submit {
    width: 80%;
    height: 40px;
    margin: 0 auto;
  }
}

body{
  background-image: url(../assets/bg.jpg);
  background-size: 100% 100vh;
}


</style>
